<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <!-- 引入 echarts.js -->
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="/plugins/bootstraptable/bootstrap-table-master/dist/bootstrap-table.min.css">
    <!-- 添加一些简单的 CSS 样式 -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin:60px;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-wrap: wrap;
        }
        .chart-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin: 20px;
            padding: 20px;
            width: 450px;
            box-sizing: border-box; /* 使得容器宽度包括 padding 和 border */
        }
        .chart-title {
            text-align: center;
            font-size: 18px;
            margin-bottom: 10px;
        }
        #genderChart, #ageChart, #scoreChart, #ageChangeChart, #scoreChangeChart{
            width: 100%;
            height: 250px;
        }
        #tooltip {
            position: absolute;
            padding: 10px;
            background-color: rgba(50, 50, 50, 0.7);
            color: white;
            border-radius: 4px;
            pointer-events: none;
            display: none; /* 默认隐藏 */
        }
        .chart-legend {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .chart-legend li::before {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 6px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <p class="navbar-text" style="font-size: 18px">学生后台管理系统</p>
        <ul class="nav nav-tabs" style="font-size: 18px">
            <li role="presentation" ><a href="/home/index">首页</a></li>
            <li role="presentation" ><a href="/students/list">学生信息管理</a></li>
            <li role="presentation"><a href="/stscore/list">学生成绩管理</a></li>
            <li role="presentation"><a href="/select/list">学生选课管理</a></li>
        </ul>
    </div>
</nav>
<div class="chart-container">
    <div class="chart-title">性别分布</div>
    <div id="genderChart"></div>
    <ul class="chart-legend" id="genderLegend"></ul>
</div>
<div class="chart-container">
    <div class="chart-title">年龄分布</div>
    <div id="ageChart"></div>
</div>
<div class="chart-container">
    <div class="chart-title">分数分布</div>
    <div id="scoreChart"></div>
</div>
<div class="chart-container">
    <div class="chart-title">年龄变化</div>
    <div id="ageChangeChart"></div>
</div>
<div class="chart-container">
    <div class="chart-title">分数变化趋势</div>
    <div id="scoreChangeChart"></div>
</div>
<div id="tooltip"></div>
<script type="text/javascript">
    // 从后端获取数据
    fetch('/webapi/students/list1')
        .then(response => response.json())
        .then(data => {
            console.log('Received data:', data); // 打印接收到的数据

            if (data.hasOwnProperty('data') && Array.isArray(data.data)) {
                const rows = data.data;

                // 性别分布饼图
                var genderChart = echarts.init(document.getElementById('genderChart'));
                var genderData = rows.reduce((acc, cur) => {
                    acc[cur.sex] = acc[cur.sex] ? acc[cur.sex] + 1 : 1;
                    return acc;
                }, {});
                var genderOption = {
                    series: [{
                        type: 'pie',
                        data: Object.keys(genderData).map(key => ({
                            name: key,
                            value: genderData[key]
                        }))
                    }],
                    tooltip: {
                        trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                        axisPointer: {// 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: '{b} : {c}人'
                    },
                };
                genderChart.setOption(genderOption);

                // 性别分布图例
                var genderLegend = document.getElementById('genderLegend');
                genderOption.series[0].data.forEach(item => {
                    var li = document.createElement('li');
                    li.style.color = item.color;
                    li.innerHTML = `${item.name}: ${item.value} (${(item.value / rows.length * 100).toFixed(2)}%)`;
                    genderLegend.appendChild(li);
                });

                // 年龄分布柱状图
                var ageChart = echarts.init(document.getElementById('ageChart'));
                var ageData = rows.reduce((acc, cur) => {
                    const ageRange = Math.floor(cur.age / 10) * 10;
                    acc[ageRange] = acc[ageRange] ? acc[ageRange] + 1 : 1;
                    return acc;
                }, {});
                var ageOption = {
                    xAxis: {
                        type: 'category',
                        data: Object.keys(ageData).map(range => `${range}-${+range + 9}`)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        type: 'bar',
                        data: Object.values(ageData)
                    }],
                    tooltip: {
                        trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                        axisPointer: {// 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: '{b}岁 : {c}人'
                    },
                };
                ageChart.setOption(ageOption);


                // 分数分布折线图
                var scoreChart = echarts.init(document.getElementById('scoreChart'));
                var scores = rows.map(row => row.score);
                var scoreHistogram = {};
                scores.forEach(score => {
                    const range = Math.floor(score / 10) * 10;
                    scoreHistogram[range] = scoreHistogram[range] ? scoreHistogram[range] + 1 : 1;
                });
                var scoreOption = {
                    xAxis: {
                        type: 'category',
                        data: Object.keys(scoreHistogram).map(range => `${range}-${+range + 9}`)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        type: 'line',
                        data: Object.values(scoreHistogram)
                    }]
                };
                scoreChart.setOption(scoreOption);

                // 年龄变化趋势折线图
                var ageChangeChart = echarts.init(document.getElementById('ageChangeChart'));
                var ageChangeOption = {
                    xAxis: {
                        type: 'category',
                        data: rows.map(row => row.age)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        type: 'line',
                        data: rows.map(row => row.age)
                    },
                    ],
                    tooltip: {
                        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                        axisPointer: {// 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            var dataIndex = params[0].dataIndex;
                            var data = rows[dataIndex];
                            return `${data.name}: ${data.age}`;
                        }
                    },

                };
                ageChangeChart.setOption(ageChangeOption);


                // 分数变化趋势折线图
                var scoreChangeChart = echarts.init(document.getElementById('scoreChangeChart'));
                var scoreChangeOption = {
                    xAxis: {
                        type: 'category',
                        data: rows.map(row => row.score)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        type: 'line',
                        data: rows.map(row => row.score),
                    }],
                    tooltip: {
                        trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                        axisPointer: {// 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            var dataIndex = params[0].dataIndex;
                            var data = rows[dataIndex];
                            return `${data.name}: ${data.score}`;
                        }
                    },
                };
                scoreChangeChart.setOption(scoreChangeOption);

            } else {
                console.error('Data format error: data is not an array');
            }
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
</script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>